<template>
  <NavBar title="账单"></NavBar>
  <scroll-view scroll-y class="scroll-y" @scrolltolower="scrolltolower">
    <div class="pageSty" v-for="item of payRecordList">
      <div class="contentBox">
        <div class="headerBox">
          <div class="headerTitle">{{ item?.levelName }}购买成功</div>
          <div class="headerTime">{{ item?.payTime }}</div>
        </div>
        <div class="centerBox">
          <div class="centerBoxList" v-if="item?.type === '购买'">
            你已成功{{ item?.type + item?.comsumeNum }}算力，解锁会员专属权益。
          </div>
          <div class="centerBoxList" v-else>
            你已成功{{ item?.type }}{{ item?.validTime
            }}{{ item?.levelName }}，解锁会员专属权益。
          </div>
          <div class="centerBoxList">
            {{ item?.type }}账号：{{ item?.nickName }}
          </div>
          <div class="centerBoxList">付款金额：￥{{ item?.amount }}</div>
          <div class="centerBoxList">支付渠道：{{ item?.payType }}</div>
          <div class="centerBoxList">有效期至：{{ item?.effectiveTime }}</div>
        </div>
      </div>
    </div>
  </scroll-view>
  <img v-if="!payRecordList.length" class="noData" src="@/draw/assets/暂无数据.png" mode="aspectFill" />
  <van-toast id="van-toast"></van-toast>
</template>

<script setup>
import NavBar from "@/components/NavBar";
import { payRecord } from "@/api/register";
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";

const payRecordList = ref([]);
const page = ref(0);
const flag = ref(true);

onLoad(() => {
  getPayRecord();
});

const getPayRecord = async () => {
  const res = await payRecord(page.value);
  payRecordList.value = res.data;
};

const scrolltolower = async () => {
  if (flag.value) {
    const res = await payRecord(page.value);
    if (res.data.lenght >= 10) {
      ++page.value;
    } else {
      flag.value = false;
    }
    payRecordList.value.push(...res.data);
  }
};
</script>

<style lang="less" scoped>
.noData {
  display: block;
  width: 500rpx;
  height: 500rpx;
  margin: 200rpx auto;
}

.pageSty {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10rpx 0 30rpx;
}

.contentBox {
  box-sizing: border-box;
  width: 690rpx;
  height: 387rpx;
  background: var(--a-main-box-bg-color);
  border-radius: 24rpx;
  padding: 0 30rpx 0;

  .headerBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 33rpx;

    .headerTitle {
      font-size: 32rpx;
      font-weight: bold;
      color: var(--a-one-text-color);
      letter-spacing: 1px;
    }

    .headerTime {
      font-size: 22rpx;
      color: var(--a-two-text-color);
    }
  }

  .centerBox {
    margin-top: 29rpx;
  }

  .centerBoxList {
    font-size: 26rpx;
    font-weight: 400;
    color: var(--a-two-text-color);
    letter-spacing: 1px;
    line-height: 55rpx;
  }
}
</style>
